<template>
	<view class="container">
		<u-sticky class="container__sticky">
			<view >
				<view >
					<u-subsection :list="subsectionList" :current="tabIndex" @change="sectionChange"></u-subsection>
				</view>
				<swiper class="container__sticky__swiperbox" :current="tabIndex" @change="onswiperchange" >
					<swiper-item class="swiper-item" v-for="(item,inx) in drawprize" :key="inx" >
						<view class="container__sticky__swiperbox__draw-ul">
							<view class="container__sticky__swiperbox__draw-ul__title"><text>{{item.issue}}期：</text>
								<view class="text-right container__sticky__swiperbox__draw-ul__more" @click="checkRoute('pages/index/drawprize',{'alias':item.alias})">历史记录<u-icon name="arrow-right-double" size="14"  style="float:right;font-weight: bold;"></u-icon></view>
							</view>
							<template v-for="(vl,vk) in item.open_code">
								<view :key="vk">
									<view  v-if="vk===6" class="container__sticky__swiperbox__draw-ul__li container__sticky__swiperbox__draw-ul__jia">
										+
									</view>
									<view class="container__sticky__swiperbox__draw-ul__li" >
										<view><view class="container__sticky__swiperbox__draw-ul__li__code" :class="'nub-color-'+vl.color">{{vl.nub}}</view></view>
										<view>{{vl.title}}</view>
									</view>
								</view>
							</template>
							
						</view>
					</swiper-item>
				</swiper>
			</view>
			
		</u-sticky>
		<swiper class="container__warpswiper" :current="tabIndex" @change="onswiperchange" >
			
			<swiper-item class="container__warpswiper__item" v-for="(kl,ks) in list" :key="ks">
				<view class="container__warpswiper__row">
					<!-- 测试 -->
					<LayoutA :is="currentComponent"></LayoutA>
					<!-- 五肖五码 -->
					<Zodiac5 :data-list="[]"></Zodiac5>
					<!-- 四肖八码 -->
					<FourZodiacEightCode :data-list="[]"></FourZodiacEightCode>
					<!-- 六肖中特 -->
					<SixZodiac :data-list="[]"></SixZodiac>
					<!-- 超准平特三中二 -->
					<threeInTwo :data-list="[]"></threeInTwo>
					<!-- 平特连肖 -->
					<PingTeLx :data-list="[]"></PingTeLx>
					<!-- 超稳八肖中特 -->
					<ChaoWenBxzt :data-list="[]"></ChaoWenBxzt>
					<!-- 「绝杀四肖 -->
					<JueShaSx :data-list="[]"></JueShaSx>
					<!-- 无错六肖王 -->
					<WuCuoLxw :data-list="[]"></WuCuoLxw>
					<!-- 必中24码 -->
					<BiZhong24 :data-list="[]"></BiZhong24>
					<!-- 内部九肖中特 -->
					<NeiBuJxzt :data-list="[]"></NeiBuJxzt>
					<!-- 平特一肖. -->
					<PingTeYx :data-list="[]"></PingTeYx>
					<!-- 平特一尾. -->
					<PingTeYw :data-list="[]"></PingTeYw>
					<!-- 超准10码•必赚 -->
					<TieSuanP10 :data-list="[]"></TieSuanP10>
					<!-- 必中特码诗. -->
					<TieSuanPtms :data-list="[]"></TieSuanPtms>
					<!-- 三期内必出生肖 -->
					<TieSuanPsqzx :data-list="[]"></TieSuanPsqzx>
					<!-- 绝杀三尾 -->
					<JueShaSanWei :data-list="[]"></JueShaSanWei>
					<!-- 王牌四尾 -->
					<WangPaiSw :data-list="[]"></WangPaiSw>
					<!-- 澳门六合彩『精选』 -->
					<JingXuan :data-list="[]"></JingXuan>
					<!-- 铁算盘『5码复式』 -->
					<TieSuanP5mfs :data-list="[]"></TieSuanP5mfs>
					<!-- 铁算盘『平特一尾』 -->
					<TieSuanPPingTeYw :data-list="[]"></TieSuanPPingTeYw>
					<!-- 铁算盘『必中波色』 -->
					<TieSuanPBiZbs :data-list="[]"></TieSuanPBiZbs>
					<!-- 『最准确的资料』 -->
					<ZhunQueZiLiao :data-list="[]"></ZhunQueZiLiao>
					<!-- 铁算盘『绝杀专区』 -->
					<TieSuanPJs :data-list="[]"></TieSuanPJs>
					<!-- 『单双各10码』 -->
					<DanShuang10m :data-list="[]"></DanShuang10m>
					<!-- 『经典推荐』优秀站 -->
					<JingDianTuiJian :data-list="[]"></JingDianTuiJian>
					<!-- 『灭庄五肖』 -->
					<MieZhuangWuXiao :data-list="[]"></MieZhuangWuXiao>
					<!-- 大赢家『金牌家野』 -->
					<DaYingJiaJinPai :data-list="[]"></DaYingJiaJinPai>
					<!-- 『一句解特码』 -->
					<JieTeMaShi :data-list="[]"></JieTeMaShi>
					<!-- 『绿色链接推荐』 -->
					<LinkTuiJian :data-list="[]"></LinkTuiJian>
					<!-- 廣东会『填词爆特』 -->
					<GuangDongHuiTC :data-list="[]"></GuangDongHuiTC>
					
					
				</view>
				
			</swiper-item>
		</swiper>
		
		
		
	</view>
</template>

<script>
	import {getLotteryList,getDrawprize} from '@/api/lottery.js'
	import LayoutA from './components/LayoutA.vue';
	import Zodiac5 from './components/zodiac5-5.vue';
	import FourZodiacEightCode from './components/four-zodiac-eight-code.vue';
	import SixZodiac from './components/six-zodiac.vue';
	import threeInTwo from './components/three-in-two.vue';
	import PingTeLx from './components/ping-te-lian-xiao.vue';
	import ChaoWenBxzt from './components/chao-wen-ba-xiao-zhong-te.vue';
	import JueShaSx from './components/jue-sha-si-xiao.vue';
	import WuCuoLxw from './components/wu-cuo-liu-xiao-wang.vue';
	import BiZhong24 from './components/bi-zhong-24-ma.vue';
	import NeiBuJxzt from './components/nei-bu-jiu-xiao-zhong-te.vue';
	import PingTeYx from './components/ping-te-yi-xiao.vue';
	import PingTeYw from './components/zhu-ge-liang-ping-te-yi-wei.vue';
	import TieSuanP10 from './components/tie-suan-pan-10-ma.vue';
	import TieSuanPtms from './components/tie-suan-pan-te-ma-shi.vue';
	import TieSuanPsqzx from './components/tie-suan-pan-san-qi-zhong-xiao.vue';
	import JueShaSanWei from './components/jue-sha-san-wei.vue';
	import WangPaiSw from './components/zhu-ge-liang-si-wei.vue';
	import JingXuan from './components/jing-xuan.vue';
	import TieSuanP5mfs from './components/tie-suan-pan-5-ma-fu-shi.vue';
	import TieSuanPPingTeYw from './components/tie-suan-pan-ping-te-yi-wei.vue';
	import TieSuanPBiZbs from './components/tie-suan-pan-bi-zhong-bo-se.vue';
	import ZhunQueZiLiao from './components/zhun-que-zi-liao.vue';
	import TieSuanPJs from './components/tie-suan-pan-jue-sha.vue';
	import DanShuang10m from './components/dan-shuang-10-ma.vue';
	import JingDianTuiJian from './components/jing-dian-tui-jian.vue';
	import MieZhuangWuXiao from './components/mie-zhuang-wu-xiao.vue';
	import DaYingJiaJinPai from './components/da-ying-jia-jin-pai.vue';
	import JieTeMaShi from './components/jie-te-ma.vue';
	import LinkTuiJian from './components/lv-se-lian-jie-tui-jian.vue';
	import GuangDongHuiTC from './components/guang-dong-hui-tian-ci.vue';
	export default {
		components:{
			LayoutA,
			Zodiac5,
			FourZodiacEightCode,
			SixZodiac,
			threeInTwo,
			PingTeLx,
			ChaoWenBxzt,
			JueShaSx,
			WuCuoLxw,
			BiZhong24,
			NeiBuJxzt,
			PingTeYx,
			PingTeYw,
			TieSuanP10,
			TieSuanPtms,
			TieSuanPsqzx,
			JueShaSanWei,
			WangPaiSw,
			JingXuan,
			TieSuanP5mfs,
			TieSuanPPingTeYw,
			TieSuanPBiZbs,
			ZhunQueZiLiao,
			TieSuanPJs,
			DanShuang10m,
			JingDianTuiJian,
			MieZhuangWuXiao,
			DaYingJiaJinPai,
			JieTeMaShi,
			LinkTuiJian,
			GuangDongHuiTC,
		},
		data() {
			return {
				list:[],
				drawprize:[],
				tabIndex:0,
				subsectionList:[],
				nextNumber:0,
				currentComponent: 'LayoutA',
			}
		},
		onLoad(){
			this.getDrawprizeInfo();
		},
		watch:{
			tabIndex(val){
				this.lotteryList();
			}
		},
		methods: {
			lotteryList(){
				if(this.list[this.tabIndex] && this.list[this.tabIndex].length > 0) {
					return false;
				}
				var map = {
					alias:this.drawprize[this.tabIndex].alias
				}
				getLotteryList(map).then(res=>{
					if(res.code === 200) {
						this.$set(this.list,this.tabIndex,res.data.list);
					}else{
						uni.$u.toast(res.message);
					}
				})
			},
			getDrawprizeInfo(){
				getDrawprize().then(res=>{
					if(res.code === 200) {
						this.drawprize = res.data.list;
						this.nextNumber = res.data.nextNumber;
						this.subsectionList = [];
						this.list = [];
						this.drawprize.forEach(item=>{
							this.subsectionList.push(item.title);
							
							this.list.push([]);
						});
						
						this.lotteryList();
					}else{
						uni.$u.toast(res.message);
					}
				})
			},
			sectionChange(e){
				this.tabIndex = e;
			},
			onswiperchange(e){
				this.tabIndex = e.detail.current;
				
			},
			clickSwiper(e){
				console.log(this.list1[0])
			},
			//展开\关闭
			plusFunc(item,e){
				item.isCheck = e ? true : false;
			},
			//复制
			copyData(item,title){
				var str = title + ' ' + item.issue + '期：';
				var arr = [];
				item.means.forEach(vl => {
					arr.push(vl.value);
				});
				str += arr.join(',');
				console.log(str);
			},
			checkRoute(_url,_params={}){
				uni.$u.route({
					url:_url,
					params:_params
				});
			}
		},
		onPullDownRefresh() {
			//下拉刷新
			this.list[this.tabIndex] = [];
			this.lotteryList();
			 uni.stopPullDownRefresh();
			 
		},
	}
</script>

<style lang="scss">
	/* #ifndef APP-PLUS */
	page {
	  width: 100%;
	  min-height: 100%;
	  display: flex;
	}
	/* #endif */
	.container{
		display: flex;
		flex: 1;
		flex-direction: column;
		// overflow: hidden;
		background-color: #ffffff;
		/* #ifdef MP-ALIPAY || MP-BAIDU */
		height: 100vh;
		/* #endif */
		margin: 10rpx;
		&__sticky{
			background-color: #ffffff;
			border-bottom: 1px solid #C0C0C0;
			margin-bottom: 10rpx;
			border-bottom-left-radius: 20rpx; /*左上角*/
			border-bottom-right-radius: 20rpx; /*右上角*/
			// top: 0 !important;
			&__swiperbox{
				height: 170rpx;
				&__draw-ul{
					height:150rpx;
					&__title{
						font-weight: bold;
						font-size: 28rpx;
						margin: 10rpx ;
					}
					&__more{
						width: 30%;
						font-size: 22rpx;
						float:right;
					}
					&__jia{
						font-size: 40rpx;
						line-height: 75rpx;
					}
					&__li{
						width:12.5%;
						text-align: center;
						font-weight: bold;
						float: left;
						&__code{
							width: 50rpx;
							height: 50rpx;
							border-radius: 100%;
							margin: 0 auto;
							color:#FFFFFF;
							line-height: 50rpx;
							font-size: 28rpx;
						}
					}
				}
			}
		}
		
		
		
		&__warpswiper{
			background-color: #ffffff;
			flex: 1;
			
			&__item{
				flex: 1;
				flex-direction: column;
				overflow: auto;
			}
			&__row{
				flex: 1;
				flex-direction: row;
				
				
				&__ul{
					border: solid #f1592a 6rpx;
					border-radius: 15rpx;
					margin-bottom: 10rpx;
					&__title{
						width: 100%;
						text-align: center;
						background-color: #f16338;
						color:#FFFFFF;
						font-size: 30rpx;
						height: 60rpx;
						line-height: 60rpx;
						font-weight: bold;
					}
					&__mall{
						font-size: 22rpx;
					}
					&__li{
						width: 90%;
						margin: 0 auto;
						padding: 10rpx 0;
						font-weight: bold;
						font-size: 28rpx;
						&__text-means{
							margin-right:4rpx;
						}
						&__text-means-code{
							margin-right: 10rpx;
						}
					}
				}
			}
		}
	}
	
	.nub-flex{
		flex-wrap: wrap;
		display: flex;
		width: 80%;
		margin: 0 auto;
	}
	.nub-flex-text{
		width:40rpx;
		text-align: center;
		display:block;
	}
	.text-center{
		text-align: center;
	}
	.text-right{
		text-align: right;
	}
	.text-active{
		color:#FF0000;
	}
	
	
	
</style>